<template>
  <div ref="goods-classify-content" class="goods-content-main">
    <!-- 此处要用div包裹起来，否则会报错要给style为定义的错误，原因是一样的，右侧的区域也需要滚动
    那么只有里面的div高大于外面的div高才能滑动 -->

    <!-- 此处不能使用v-if，是因为v-if会删除DOM，如果删除了DOM的话，那么下面的值就获取不到了，所以需要v-show来展示，让其显示，隐藏 -->
    <div v-show="goods.length > 0 ">
      <div class="goods-wrap" v-for="(item,index) in goods" :key="index">
        <div class="classify-name">{{ item.title }}</div>
          <div class="goods-items-wrap">
            <!-- $router.push包裹的时候要用单引号，不能双引号，否则报错 -->
            <ul v-for="(item2,index2) in item.goods" :key="index2" @click="$router.push('/goods/details?gid='+item2.gid)">
              <li>
                <!-- 会出现一个问题就是后部分的图片加载不出来，原因是因为懒加载监听的是window下的scroll事件
                而此时用的是iscroll事件，产生了冲突 解决方式：改变iscroll监听-->
                <img src="../../../assets/images/common/lazyImg.jpg" :data-echo="item2.image" alt />
             </li>
            <li>{{ item2.title }}</li>
          </ul>
        </div>
      </div>
    </div>
    <div v-show="goods.length <= 0" class="no-data">没有相关商品!!</div>
  </div>
</template>

<script>
import IScroll from '../../../assets/js/libs/iscroll';
import {mapState,mapActions} from 'vuex'
export default {
  name: "goods-classify-item",
  methods:{
      ...mapActions({
          getGoods:'goods/getGoods'
      }),
        scrollPreventDefault(e) {
            e.preventDefault();
        },
        //封装一个懒加载方法，因为有重复的地方，无外乎就是参数不同
        init(cid) {
           this.getGoods({cid:cid,success:()=>{
            this.$nextTick(()=>{
              this.myScroll.refresh();
              this.$utils.lazyImg();
            })
          }});
        }
    },
    computed:{
        ...mapState({
            goods:(state)=>state.goods.goods
        })
    },
    created () {
        this.cid = this.$route.query.cid ? this.$route.query.cid : "";
        /*
          此处需要回调函数的原因是因为当页面刷新的时候，右侧区域就滚动不了的问题，问题是一样的，就是需要重新计算一下滚动的距离
        */
        // this.getGoods({cid:this.cid,success:()=>{
        //   this.$nextTick(()=>{
        //     this.myScroll.refresh();
        //     this.$utils.lazyImg();
        //   })
        // }});
        this.init(this.cid);
    },
    //实时更新DOM,解决DOM不能实时更新的问题
    beforeRouteUpdate (to,from,next) {
        // console.log(to.query.cid)
        //此处需要通过回调函数进行调用，因为产生了异步操作，导致右侧区域滚动不执行，需要使用refresh重新计算
        //别忘记了获取DOM，需要重新获取，使用this.$nextTick
        // this.getGoods({cid:to.query.cid,success:()=>{
        //   this.$nextTick(()=>{
        //     this.myScroll.refresh();
        //     this.$utils.lazyImg();
        //   })
        // }});
        this.init(to.query.cid);
        next();
    },
     mounted(){
        this.$refs['goods-classify-content'].addEventListener("touchmove",this.scrollPreventDefault);
            this.myScroll = new IScroll(this.$refs['goods-classify-content'], {
                scrollX : false,
                scrollY : true,
                preventDefault : false
        });

        //对iscroll事件的监听，scrollEnd是滚动结束,内部有一个回调函数，通过回调函数在重新执行一下懒加载
        /*
          但是会出现一个问题，就是必须要滚动一下图片才会改变，不滚动就不会改变，这是因为在点击的时候，并没有进行懒加载，所以
          在getGoods中懒加载一下就好了
        */
        this.myScroll.on("scrollEnd",()=>{
          this.$utils.lazyImg();
        })
    },
    beforeDestroy(){
        this.$refs['goods-classify-content'].removeEventListener("touchmove",this.scrollPreventDefault);
    }
};
</script>

<style scoped>
    .goods-content-main {
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    .goods-wrap {
        width: 100%;
        height: auto;
    }
    .goods-wrap .classify-name {
        font-size: 0.28rem;
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        overflow: hidden;
    }
    .goods-wrap .goods-items-wrap {
        width: 100%;
        height: auto;
        background-color: #ffffff;
        padding-top: 0.2rem;
        overflow: hidden;
    }
    .goods-wrap .goods-items-wrap ul {
        width: 32%;
        height: auto;
        float: left;
        margin-left: 0.5%;
        margin-right: 0.5%;
        margin-bottom: 0.5rem;
    }
    .goods-wrap .goods-items-wrap ul li:nth-child(1) {
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
    }
    .goods-wrap .goods-items-wrap ul li:nth-child(1) img {
        /* 等比例缩放 */
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
    .goods-wrap .goods-items-wrap ul li:nth-child(2) {
        width: 90%;
        height: 0.8rem;
        font-size: 0.24rem;
        overflow: hidden;
        text-align: center;
        margin: 0 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 0.2rem;
    }
</style>